<template>
	<el-table-v2 border :columns="columns" :data="tableData" :fixed-data="fixedData" :width="700" :height="400" :row-class="rowClass" fixed @scroll="onScroll" />
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'

const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
	Array.from({ length }).map((_, columnIndex) => ({
		...props,
		key: `${prefix}${columnIndex}`,
		dataKey: `${prefix}${columnIndex}`,
		title: `Column ${columnIndex}`,
		width: 150
	}))

const generateData = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = 'row-') =>
	Array.from({ length }).map((_, rowIndex) => {
		return columns.reduce(
			(rowData, column, columnIndex) => {
				rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
				return rowData
			},
			{
				id: `${prefix}${rowIndex}`,
				parentId: null
			}
		)
	})

const columns = generateColumns(10)
const data = generateData(columns, 200)

const rowClass = ({ rowIndex }) => {
	if (rowIndex < 0 || (rowIndex + 1) % 5 === 0) return 'sticky-row'
}

const stickyIndex = ref(0)

const fixedData = computed(() => data.slice(stickyIndex.value, stickyIndex.value + 1))

const tableData = computed(() => {
	return data.slice(1)
})

const onScroll = ({ scrollTop }) => {
	stickyIndex.value = Math.floor(scrollTop / 250) * 5
}
</script>

<style>
.el-el-table-v2__fixed-header-row {
	background-color: var(--el-color-primary-light-5);
	font-weight: bold;
}
</style>
